JavaScriptã€ãã³ãã«ãŒããè§£ãæããïŒéåæããã°ã©ãã³ã°ãäžŠè¡æ§ãããã©ãŒãã³ã¹æé©åãç¶²çŸ ãããããããã¬ãã«ã®éçºè åãç·åã¬ã€ãã
ã€ãã³ãã«ãŒã: éåæJavaScriptãçè§£ãã
ãŠã§ãã®èšèªã§ããJavaScriptã¯ããã®åçãªæ§è³ªãšãã€ã³ã¿ã©ã¯ãã£ãã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããèœåã§ç¥ãããŠããŸãããããããã®äžæ žã«ãããŠJavaScriptã¯ã·ã³ã°ã«ã¹ã¬ããã§ãããäžåºŠã«1ã€ã®ã¿ã¹ã¯ããå®è¡ã§ããŸãããããã¯èª²é¡ãæç€ºããŸãããµãŒããŒããã®ããŒã¿ååŸããŠãŒã¶ãŒå ¥åã®åŸ æ©ãªã©ãæéã®ãããã¿ã¹ã¯ããä»ã®ã¿ã¹ã¯ã®å®è¡ããããã¯ãããã¢ããªã±ãŒã·ã§ã³ãå¿çäžèœã«ããããšãªããJavaScriptã¯ã©ã®ããã«åŠçããã®ã§ããããïŒãã®çãã¯ãéåæJavaScriptã®ä»çµã¿ãçè§£ããããã®åºæ¬çãªæŠå¿µã§ããã€ãã³ãã«ãŒãã«ãããŸãã
ã€ãã³ãã«ãŒããšã¯ïŒ
ã€ãã³ãã«ãŒãã¯ãJavaScriptã®éåæåäœãåãããšã³ãžã³ã§ããããã¯ãJavaScriptãã·ã³ã°ã«ã¹ã¬ããã§ããã«ãããããããè€æ°ã®æäœã䞊è¡ããŠåŠçããããšãå¯èœã«ããã¡ã«ããºã ã§ããæéã®ãããæäœãã¡ã€ã³ã¹ã¬ããããããã¯ããªãããã«ãã¿ã¹ã¯ã®æµãã管çãã亀é管å¶å®ã®ãããªãã®ãšèããŠãã ããã
ã€ãã³ãã«ãŒãã®äž»èŠã³ã³ããŒãã³ã
- ã³ãŒã«ã¹ã¿ãã¯: ããã§JavaScriptã³ãŒãã®å®è¡ãè¡ãããŸãã颿°ãåŒã³åºããããšã³ãŒã«ã¹ã¿ãã¯ã«è¿œå ããã颿°ãçµäºãããšã¹ã¿ãã¯ããåé€ãããŸãã
- Web API (ãŸãã¯ãã©ãŠã¶API): ãããã¯ã`setTimeout`ã`fetch`ãDOMã€ãã³ããªã©ã®éåææäœãåŠçããããã«ãã©ãŠã¶ïŒãŸãã¯Node.jsïŒã«ãã£ãŠæäŸãããAPIã§ãããããã¯ã¡ã€ã³ã®JavaScriptã¹ã¬ããã§ã¯å®è¡ãããŸããã
- ã³ãŒã«ããã¯ãã¥ãŒ (ãŸãã¯ã¿ã¹ã¯ãã¥ãŒ): ãã®ãã¥ãŒã«ã¯ãå®è¡åŸ ã¡ã®ã³ãŒã«ããã¯ãä¿æãããŸãããããã®ã³ãŒã«ããã¯ã¯ãéåææäœãå®äºãããšãïŒäŸ: ã¿ã€ããŒãæéåãã«ãªã£ãåŸããµãŒããŒããããŒã¿ãåä¿¡ãããåŸïŒã«Web APIã«ãã£ãŠãã¥ãŒã«é 眮ãããŸãã
- ã€ãã³ãã«ãŒã: ããã¯ãã³ãŒã«ã¹ã¿ãã¯ãšã³ãŒã«ããã¯ãã¥ãŒãåžžã«ç£èŠããã³ã¢ã³ã³ããŒãã³ãã§ããã³ãŒã«ã¹ã¿ãã¯ã空ã®å Žåãã€ãã³ãã«ãŒãã¯ã³ãŒã«ããã¯ãã¥ãŒããæåã®ã³ãŒã«ããã¯ãåãåºããå®è¡ã®ããã«ã³ãŒã«ã¹ã¿ãã¯ã«ããã·ã¥ããŸãã
ããã`setTimeout`ã䜿ã£ãç°¡åãªäŸã§èŠãŠã¿ãŸããã:
console.log('Start');
setTimeout(() => {
console.log('Inside setTimeout');
}, 2000);
console.log('End');
ã³ãŒããã©ã®ããã«å®è¡ããããã¯æ¬¡ã®ãšããã§ã:
- `console.log('Start')`ã¹ããŒãã¡ã³ããå®è¡ãããã³ã³ãœãŒã«ã«åºåãããŸãã
- `setTimeout`颿°ãåŒã³åºãããŸããããã¯Web API颿°ã§ããã³ãŒã«ããã¯é¢æ°`() => { console.log('Inside setTimeout'); }`ãã2000ããªç§ïŒ2ç§ïŒã®é å»¶ãšãšãã«`setTimeout`颿°ã«æž¡ãããŸãã
- `setTimeout`ã¯ã¿ã€ããŒãéå§ãã*éèŠãªããšãšããŠ*ãã¡ã€ã³ã¹ã¬ããããããã¯ããŸãããã³ãŒã«ããã¯ã¯ããã«å®è¡ãããŸããã
- `console.log('End')`ã¹ããŒãã¡ã³ããå®è¡ãããã³ã³ãœãŒã«ã«åºåãããŸãã
- 2ç§ä»¥äžçµéãããšã`setTimeout`ã®ã¿ã€ããŒãæéåãã«ãªããŸãã
- ã³ãŒã«ããã¯é¢æ°ãã³ãŒã«ããã¯ãã¥ãŒã«é 眮ãããŸãã
- ã€ãã³ãã«ãŒãã¯ã³ãŒã«ã¹ã¿ãã¯ããã§ãã¯ããŸããã³ãŒã«ã¹ã¿ãã¯ã空ã®å ŽåïŒä»ã®ã³ãŒããçŸåšå®è¡ãããŠããªãããšãæå³ããŸãïŒãã€ãã³ãã«ãŒãã¯ã³ãŒã«ããã¯ãã¥ãŒããã³ãŒã«ããã¯ãåãåºããå®è¡ã®ããã«ã³ãŒã«ã¹ã¿ãã¯ã«ããã·ã¥ããŸãã
- ã³ãŒã«ããã¯é¢æ°ãå®è¡ããã`console.log('Inside setTimeout')`ãã³ã³ãœãŒã«ã«åºåãããŸãã
åºåã¯æ¬¡ã®ããã«ãªããŸã:
Start
End
Inside setTimeout
'End'ã'Inside setTimeout'ãã*å ã«*åºåãããŠããããšã«æ³šç®ããŠãã ãããããã¯'Inside setTimeout'ã'End'ãããåã«å®çŸ©ãããŠããã«ããããããã§ããããã¯éåæåäœã瀺ããŠããŸãã`setTimeout`颿°ã¯åŸç¶ã®ã³ãŒãã®å®è¡ããããã¯ããŸãããã€ãã³ãã«ãŒãã¯ãã³ãŒã«ããã¯é¢æ°ãæå®ãããé å»¶ã®*åŸ*ã«ããããŠ*ã³ãŒã«ã¹ã¿ãã¯ãç©ºã®æ*ã«å®è¡ãããããšãä¿èšŒããŸãã
éåæJavaScriptã®ãã¯ããã¯
JavaScriptã¯ãéåææäœãåŠçããããã®ããã€ãã®æ¹æ³ãæäŸããŸã:
ã³ãŒã«ããã¯
ã³ãŒã«ããã¯ã¯æãåºæ¬çãªã¡ã«ããºã ã§ãããããã¯ä»ã®é¢æ°ã«åŒæ°ãšããŠæž¡ãããéåææäœãå®äºãããšãã«å®è¡ããã颿°ã§ããã·ã³ãã«ã§ãããè€æ°ã®ãã¹ããããéåææäœãæ±ãå Žåããã³ãŒã«ããã¯å°çããŸãã¯ãç Žæ» ã®ãã©ããããã«ã€ãªããå¯èœæ§ããããŸãã
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(data))
.catch(error => console.error('Error:', error));
}
fetchData('https://api.example.com/data', (data) => {
console.log('Data received:', data);
});
ãããã¹
ãããã¹ã¯ãã³ãŒã«ããã¯å°çã®åé¡ã«å¯ŸåŠããããã«å°å ¥ãããŸããããããã¹ã¯ãéåææäœã®æçµçãªå®äºïŒãŸãã¯å€±æïŒãšãã®çµæã®å€ã衚ããŸãããããã¹ã¯ã`.then()`ã䜿çšããŠéåææäœãé£éããã`.catch()`ã䜿çšããŠãšã©ãŒãåŠçããããšã§ãéåæã³ãŒããããèªã¿ãããã管çããããããŸãã
function fetchData(url) {
return fetch(url)
.then(response => response.json());
}
fetchData('https://api.example.com/data')
.then(data => {
console.log('Data received:', data);
})
.catch(error => {
console.error('Error:', error);
});
Async/Await
Async/Awaitã¯ããããã¹ã®äžã«æ§ç¯ãããæ§æã§ããããã«ãããéåæã³ãŒããåæã³ãŒãã®ããã«èŠããåäœããããã«ãªããããã«èªã¿ãããçè§£ãããããªããŸãã`async`ããŒã¯ãŒãã¯éåæé¢æ°ã宣èšããããã«äœ¿çšããã`await`ããŒã¯ãŒãã¯ãããã¹ã解決ããããŸã§å®è¡ãäžæåæ¢ããããã«äœ¿çšãããŸããããã«ãããéåæã³ãŒããããé æ¬¡çã«æããããæ·±ããã¹ããé¿ããå¯èªæ§ãåäžãããŸãã
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log('Data received:', data);
} catch (error) {
console.error('Error:', error);
}
}
fetchData('https://api.example.com/data');
äžŠè¡æ§ vs. äžŠåæ§
äžŠè¡æ§ãšäžŠåæ§ãåºå¥ããããšã¯éèŠã§ããJavaScriptã®ã€ãã³ãã«ãŒãã¯äžŠè¡æ§ãå¯èœã«ããŸããããã¯ãè€æ°ã®ã¿ã¹ã¯ã*ãããã*åæã«åŠçããããšãæå³ããŸãããããããã©ãŠã¶ãNode.jsã®ã·ã³ã°ã«ã¹ã¬ããç°å¢ã«ãããŠãJavaScriptã¯éåžžãã¡ã€ã³ã¹ã¬ããäžã§ã¿ã¹ã¯ãäžåºŠã«1ã€ãã€ïŒäžã€ãã€ïŒå®è¡ããŸããäžæ¹ãäžŠåæ§ãšã¯ãè€æ°ã®ã¿ã¹ã¯ã*åæã«*å®è¡ããããšã§ããJavaScriptåäœã§ã¯çã®äžŠåæ§ãæäŸããŸããããWeb WorkersïŒãã©ãŠã¶å ïŒã`worker_threads`ã¢ãžã¥ãŒã«ïŒNode.jså ïŒã®ãããªæè¡ã¯ãå¥ã ã®ã¹ã¬ãããå©çšããããšã§äžŠåå®è¡ãå¯èœã«ããŸããWeb Workersã¯ãèšç®è² è·ã®é«ãã¿ã¹ã¯ããªãããŒãããããã«äœ¿çšã§ããããããã¡ã€ã³ã¹ã¬ããããããã¯ããã®ãé²ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãåäžãããŸããããã¯äžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠé¢é£æ§ããããŸãã
å®äžçã®äŸãšèæ ®äºé
ã€ãã³ãã«ãŒãã¯ããŠã§ãéçºãšNode.jséçºã®å€ãã®åŽé¢ã§éåžžã«éèŠã§ã:
- ãŠã§ãã¢ããªã±ãŒã·ã§ã³: ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒã¯ãªãã¯ããã©ãŒã éä¿¡ïŒã®åŠçãAPIããã®ããŒã¿ååŸããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ïŒUIïŒã®æŽæ°ãã¢ãã¡ãŒã·ã§ã³ã®ç®¡çã¯ãã¹ãŠãã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãç¶æããããã«ã€ãã³ãã«ãŒãã«å€§ããäŸåããŠããŸããããšãã°ãã°ããŒãã«ãªEã³ããŒã¹ãŠã§ããµã€ãã¯ãæ°åã®åæãŠãŒã¶ãŒãªã¯ãšã¹ããå¹ççã«åŠçããå¿ èŠãããããã®UIã¯éåžžã«å¿çæ§ãé«ãå¿ èŠããããŸããããããã¯ãã¹ãŠã€ãã³ãã«ãŒãã«ãã£ãŠå¯èœã«ãªããŸãã
- Node.jsãµãŒããŒ: Node.jsã¯ã€ãã³ãã«ãŒãã䜿çšããŠãåæã¯ã©ã€ã¢ã³ããªã¯ãšã¹ããå¹ççã«åŠçããŸããããã«ãããåäžã®Node.jsãµãŒããŒã€ã³ã¹ã¿ã³ã¹ããããã¯ããããšãªãã倿°ã®ã¯ã©ã€ã¢ã³ãã«åæã«ãµãŒãã¹ãæäŸã§ããŸããããšãã°ãäžçäžã®ãŠãŒã¶ãŒãå©çšãããã£ããã¢ããªã±ãŒã·ã§ã³ã¯ãã€ãã³ãã«ãŒããæŽ»çšããŠå€æ°ã®åæãŠãŒã¶ãŒæ¥ç¶ã管çããŸããã°ããŒãã«ãªãã¥ãŒã¹ãŠã§ããµã€ããæäŸããNode.jsãµãŒããŒã倧ããªæ©æµãåããŸãã
- API: ã€ãã³ãã«ãŒãã¯ãããã©ãŒãã³ã¹ã®ããã«ããã¯ãªãã«å€æ°ã®ãªã¯ãšã¹ããåŠçã§ããå¿çæ§ã®é«ãAPIã®äœæã容æã«ããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãšUIã®æŽæ°: ã€ãã³ãã«ãŒãã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã«ãããã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãšUIã®æŽæ°ããªãŒã±ã¹ãã¬ãŒã·ã§ã³ããŸããUIãç¹°ãè¿ãæŽæ°ããã«ã¯ãã€ãã³ãã«ãŒããä»ããæŽæ°ã®ã¹ã±ãžã¥ãŒãªã³ã°ãå¿ èŠã§ãããããã¯åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠéåžžã«éèŠã§ãã
ããã©ãŒãã³ã¹æé©åãšãã¹ããã©ã¯ãã£ã¹
ã€ãã³ãã«ãŒããçè§£ããããšã¯ãããã©ãŒãã³ã¹ã®é«ãJavaScriptã³ãŒããäœæããããã«äžå¯æ¬ ã§ã:
- ã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãé¿ãã: æéã®ãããåææäœã¯ã¡ã€ã³ã¹ã¬ããããããã¯ããã¢ããªã±ãŒã·ã§ã³ãå¿çäžèœã«ããå¯èœæ§ããããŸãã`setTimeout`ã`async/await`ãªã©ã®ãã¯ããã¯ã䜿çšããŠã倧ããªã¿ã¹ã¯ãããå°ããªéåæã®ãã£ã³ã¯ã«åå²ããŠãã ããã
- Web APIã®å¹ççãªå©çš: éåææäœã«ã¯ã`fetch`ã`setTimeout`ãªã©ã®Web APIãæŽ»çšããŠãã ããã
- ã³ãŒããããã¡ã€ãªã³ã°ãšããã©ãŒãã³ã¹ãã¹ã: ãã©ãŠã¶ã®éçºè ããŒã«ãNode.jsã®ãããã¡ã€ãªã³ã°ããŒã«ã䜿çšããŠãã³ãŒãã®ããã©ãŒãã³ã¹ããã«ããã¯ãç¹å®ããããã«å¿ããŠæé©åããŠãã ããã
- Web Workers/Worker Threadsã®äœ¿çšïŒè©²åœããå ŽåïŒ: èšç®è² è·ã®é«ãã¿ã¹ã¯ã«ã€ããŠã¯ããã©ãŠã¶ã§ã¯Web WorkersãNode.jsã§ã¯Worker Threadsã䜿çšããŠãã¡ã€ã³ã¹ã¬ããããäœæ¥ããªãããŒãããçã®äžŠåæ§ãå®çŸããããšãæ€èšããŠãã ãããããã¯ç»ååŠçãè€éãªèšç®ã«ç¹ã«æçã§ãã
- DOMæäœã®æå°å: é »ç¹ãªDOMæäœã¯ã³ã¹ããããããŸããDOMæŽæ°ããããåŠçããããä»®æ³DOMïŒäŸ: ReactãVue.jsãªã©ïŒã®ãããªãã¯ããã¯ã䜿çšããŠã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãæé©åããŠãã ããã
- ã³ãŒã«ããã¯é¢æ°ã®æé©å: äžèŠãªãªãŒããŒããããé¿ãããããã³ãŒã«ããã¯é¢æ°ã¯å°ããå¹ççã«ä¿ã£ãŠãã ããã
- ãšã©ãŒãé©åã«åŠçãã: æªåŠçã®äŸå€ãã¢ããªã±ãŒã·ã§ã³ãã¯ã©ãã·ã¥ãããã®ãé²ããããé©åãªãšã©ãŒãã³ããªã³ã°ïŒäŸ: ãããã¹ã§ã®`.catch()`ãasync/awaitã§ã®`try...catch`ïŒãå®è£ ããŠãã ããã
ã°ããŒãã«ãªèæ ®äºé
äžçäžã®ãŠãŒã¶ãŒã察象ãšããã¢ããªã±ãŒã·ã§ã³ãéçºããéã«ã¯ã次ã®ç¹ãèæ ®ããŠãã ãã:
- ãããã¯ãŒã¯é å»¶: äžçåå°ã®ãŠãŒã¶ãŒã¯ãç°ãªããããã¯ãŒã¯é å»¶ãçµéšããŸããããã°ã¬ãã·ããªãªãœãŒã¹ã®èªã¿èŸŒã¿ãå¹ççãªAPIåŒã³åºãã䜿çšããŠåæèªã¿èŸŒã¿æéãççž®ãããªã©ããããã¯ãŒã¯é å»¶ãé©åã«åŠçããããã«ã¢ããªã±ãŒã·ã§ã³ãæé©åããŠãã ãããã¢ãžã¢ã«ã³ã³ãã³ããæäŸãããã©ãããã©ãŒã ã®å Žåãã·ã³ã¬ããŒã«ã®é«éãµãŒããŒãçæ³çãããããŸããã
- ããŒã«ãªãŒãŒã·ã§ã³ãšåœéåïŒi18nïŒ: ã¢ããªã±ãŒã·ã§ã³ãè€æ°ã®èšèªãšæåçèšå®ããµããŒãããŠããããšã確èªããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£: é害ãæã€ãŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ããããã«ããŠãã ãããARIA屿§ã®äœ¿çšãããŒããŒãããã²ãŒã·ã§ã³ã®æäŸãæ€èšããŠãã ãããããŸããŸãªãã©ãããã©ãŒã ãã¹ã¯ãªãŒã³ãªãŒããŒã§ã®ã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãã¯éåžžã«éèŠã§ãã
- ã¢ãã€ã«æé©å: äžçäžã®å€ãã®ãŠãŒã¶ãŒãã¹ããŒããã©ã³çµç±ã§ã€ã³ã¿ãŒãããã«ã¢ã¯ã»ã¹ãããããã¢ããªã±ãŒã·ã§ã³ãã¢ãã€ã«ããã€ã¹åãã«æé©åãããŠããããšã確èªããŠãã ãããããã«ã¯ã¬ã¹ãã³ã·ããã¶ã€ã³ãšæé©åãããã¢ã»ãããµã€ãºãå«ãŸããŸãã
- ãµãŒããŒã®å Žæãšã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒ: CDNãæŽ»çšããŠãå°ççã«å€æ§ãªå Žæããã³ã³ãã³ããé ä¿¡ããäžçäžã®ãŠãŒã¶ãŒã®é å»¶ãæå°éã«æããŠãã ãããäžçäžã®ãŠãŒã¶ãŒã«ããè¿ããµãŒããŒããã³ã³ãã³ããæäŸããããšã¯ãã°ããŒãã«ãªèŠèŽè ã«ãšã£ãŠéèŠã§ãã
çµè«
ã€ãã³ãã«ãŒãã¯ãå¹ççãªéåæJavaScriptã³ãŒããçè§£ããèšè¿°ããããã®åºæ¬çãªæŠå¿µã§ãããã®ä»çµã¿ãçè§£ããããšã§ãã¡ã€ã³ã¹ã¬ããããããã¯ããããšãªãè€æ°ã®æäœã䞊è¡ããŠåŠçãããå¿çæ§ãé«ãããã©ãŒãã³ã¹ã«åªããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããã·ã³ãã«ãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããå Žåã§ããè€éãªNode.jsãµãŒããŒãæ§ç¯ããå Žåã§ããã€ãã³ãã«ãŒãããã£ãããšææ¡ããããšã¯ãäžçäžã®ãŠãŒã¶ãŒã«ã¹ã ãŒãºã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšåªãããã¹ãŠã®JavaScriptéçºè ã«ãšã£ãŠäžå¯æ¬ ã§ãã